<template>
  <div>
    <div id="nav">
      <el-card class="box-card">
        <h3>登录</h3>
        <el-form
          :model="userform"
          :rules="userrul"
          ref="userref"
          label-width="100px"
          class="demo-ruleForm"
        >
          <el-form-item label="用户名" prop="username">
            <el-input v-model="userform.username"></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="password">
            <el-input v-model="userform.password" type="password"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="resect">重置</el-button>
            <el-button type="primary" @click="reg">登录</el-button>
            <span class="nouser">没有账号?,快去注册一个吧</span
            ><router-link to="/userReg">
              <span class="recest">点我注册</span>
            </router-link>
          </el-form-item>
        </el-form>
      </el-card>
    </div>
  </div>
</template>

<script>
import navlist from "./navlist.vue";
import $ from "jquery";
import bus from "../bus";
export default {
  components: { navlist },
  name: "VueSign",

  data() {
    //校验手机号
    var checkMobile = (rule, value, cb) => {
      const regMobile = /^1[3456789]\d{9}$/;
      if (regMobile.test(value)) {
        return cb();
      }
      //返回一个错误提示
      cb(new Error("请输入合法的手机号码"));
    };
    return {
      userform: {
        username: "",
        password: "",
      },
      sign: "登录",
      name: "",
      //校验
      userrul: {
        username: [
          { required: true, message: "请输入用户名", trigger: "blur" },
          { min: 2, max: 8, message: "长度在 2 到 8 个字符", trigger: "blur" },
        ],
        password: [
          { required: true, message: "请输入密码", trigger: "blur" },
          { min: 4, max: 8, message: "长度在 4 到 8 个字符", trigger: "blur" },
        ],
      },
    };
  },

  mounted() {},

  methods: {
    resect() {
      this.$refs.userref.resetFields();
    },
    reg() {
      this.$refs.userref.validate(async (value) => {
        if (!value) return this.$message.error("请输入完整");
        $.post(
          "http://bufantec.com/api/test/user/doLogin",
          this.userform,
          (res) => {
            if (res.code == "success") {
              this.$message.success("登录成功,5s后返回");
              sessionStorage.setItem("pwd", "已经登陆过了");
              sessionStorage.setItem("name", this.userform.username);
              bus.$emit("sendedit", this.userform.username);
              const url = this.$route.query.url;
              setTimeout(() => {
                if (url == "/userReg") {
                  this.$router.go(-2);
                } else {
                  this.$router.replace(url);
                }
              }, 5000);
            } else {
              return this.$message.error("信息有误");
            }
          }
        );
      });
    },
  },
};
</script>

<style  scoped>
.recest {
  margin-left: 20px;
  color: #f0f;
  vertical-align: baseline;
}
.nouser {
  margin-left: 600px;
  vertical-align: baseline;
}
h3 {
  text-align: center;
  margin: 20px;
}
</style>